<template>
  <div class="cashFlow">
    <!--现金流量列表弹窗-->
    <el-dialog
      v-dialogDrag
      title="现金流量表"
      model
      :visible.sync="isCurrencyDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
      append-to-body
    >
      <div class="materiel-form">
        <search :options="selectData" :search-son="searchSon" :msg="tacitly" @seek="collect" @hand="currencySearch" />
        <el-button type="primary" class="btn" size="mini" @click="currencySearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        table-height="53vh"
        serial
        @clickRow="currencySelectRow"
      >
        <template v-slot:billSlot="clo">
          <el-tag v-if="clo.scope.row.fforbidStatus==='否'">{{ clo.scope.row.fforbidStatus }}</el-tag>
          <el-tag v-else type="danger">{{ clo.scope.row.fforbidStatus }}</el-tag>
        </template>
        <template v-slot:btnState="col">
          <el-tag :type="col.scope.row.stateColor">{{ col.scope.row.fdocumentstatus }}</el-tag>
        </template>
      </jc-table>
      <jc-pagination
        v-show="currency.total > 0"
        :total="currency.total"
        :page.sync="currency.pageNum"
        :limit.sync="currency.pageSize"
        @pagination="queryTBdCurrency"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryCashFlowProjectList } from '@/api/basicManagement/cashFlow'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'

export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    fid: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ftype: 94,
      // 结算币别
      isCurrencyDialog: true,
      currency: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200, // 每页显示多少条数据
        fname: ''
      },
      tableData: [],
      tableHeader: [
        { label: this.$t('shop.fnumber'), prop: 'fbillno', width: '120' },
        { label: this.$t('shop.name1'), prop: 'fname', width: '250' },
        { label: this.$t('market.descrip'), prop: 'fdescription' },
        { label: '类别属性', prop: 'fbilltyper', width: '100' },
        { label: '方向', prop: 'fdirectionor', width: '120' }
      ],
      prodValue: {}
    }
  },
  created() {
    this.queryTBdCurrency()
  },
  methods: {
    // 查询现金流量
    async queryTBdCurrency(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        ...this.currency,
        search: this.searCollData.concat([{ field: 'fbilltyper', seach: this.fid === 1 ? '主表项目' : '附表项目', fid: 7 }])
        // [{ field: 'fbilltyper', seach: this.fid === 1 ? '主表项目' : '附表项目', fid: 7 }]
      }
      const { data: RES } = await queryCashFlowProjectList(DATA)
      this.tableData = RES.list
      this.currency.total = RES.total
    },
    currencySearch(ev) {
      this.currency.pageNum = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.queryTBdCurrency(ev.detail)
      } else {
        this.queryTBdCurrency()
      }
    },
    // 选择现金流量
    currencySelectRow(item) {
      this.$emit('cash', item)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('cash')
    }
  }
}
</script>
<style scoped lang="scss">
.cashFlow {
  @include listBom;
}
.materiel-form {
  position: relative;
  margin-bottom: 15px;
  .btn{
    transform: translateY(18%);
    margin-left: 450px !important;
  }
}
</style>

